<template>
  <div  style=" background: #ffffff">
    <van-search v-model="value" placeholder="请输入搜索关键词" show-action shape="round"  left-arrow>
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <!--  -->
    <h4 style="margin-top:20%" v-show="isok">请输入搜索信息</h4>
    <div>
      <div class="likegoods">
        <div class="listbott">
     <div class="mainlist">
      <div class="items" v-for="item in sousuo" :key="item.id" @click="details(item)">
        <figure style="height: 180px;">
          <img
            class="goodsImg lazy"
            :data-original="item.img"
            :src="item.img"
            style="display: inline;"
          />
        </figure>
        <div class="items-x">
          <p class="name">{{item.name}}</p>
          <p class="dis">{{item.dis}}</p>
          <p>
            <span class="salePrice">{{item.delprice}}</span>
            <span class="price">{{item.price}}</span>
          </p>
        </div>
      </div>
    </div>
      
    </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      sousuo: "",
      isok:true,
    };
  },
  components: {},
  methods: {
    async search(cname) {
      let { data } = await this.$axios.get(
        "http://localhost:5555/listbo/sousuo",
        {
          params: { cname }
        }
      );
      this.sousuo = data;
      console.log(data);

      // console.log(this.$route.query);
      // let { title, img, name } = value;
      // this.$router.push({ name: "sousuo", query: { title, img, name } });
    },
    onSearch() {
      this.search(this.value);
      this.isok=false
    },
    details(item) {
      //点击商品进入详情页
      let { id, cname, img, name, dis, price, delprice } = item;
      // window.console.log({ id, cname, img, name, dis, price, delprice });
      this.$router.push({ name: "details", query: { id, cname, img, name, dis, price, delprice }
      });
    }
  },
  created() {}
};
</script>
<style>
.van-search__action{
  background :#3985FF;
  border-radius: 0.1rem;
  margin: 0.1rem;
  color: #ffffff !important;
}
</style>